<template>
  <div class="detail_info" v-bind:class="data.commission.show ? 'bg7' : ''" :style="'margin:' + data.padding.top + 'px 0 ' + data.padding.bottom + 'px 0'">
    <div class="commission" v-if="data.commission.show">
      <span>{{ data.commission.text || '产品销售佣金：' }}</span>
      <span>5~5.5元</span>
    </div>
    <div class="container" :style="'background:' + data.color.bg">
      <div class="top_floor">
        <div>
          <div class="title-floor floor"><p class="title" :style="'color:' + data.color.title">阿克苏冰糖心苹果阿克苏冰糖心苹阿克苏 冰糖心苹果阿克苏冰糖果...</p></div>
          <div class="desc-floor floor" :style="'color:' + data.color.desc">很长很长很长很长很长很长很长很长很长很长很长很长的副标题</div>
        </div>
        <div class="share-collect">
          <div class="flex_center" :style="'color:' + data.collect.color" v-if="data.collect && data.collect.show">
            <i :class="data.collect.icon"></i>
            <span>{{ data.collect.text }}</span>
          </div>
          <div class="flex_center" :style="'color:' + data.share.color" v-if="data.share.show">
            <i :class="data.share.icon"></i>
            <span>{{ data.share.text }}</span>
          </div>
        </div>
      </div>

      <div class="price-floor floor">
        <div>
          <div class="price-level">
            <p class="price" :style="'color:' + data.color.price">
              <span class="price-unit">￥</span>
              <i class="num">1125</i>
            </p>
            <div class="del-price-money" :style="'color:' + data.color.del_price"><span class="origin-price-line">￥1334</span></div>
          </div>
        </div>
      </div>

      <div class="express-floor floor">
       <!-- <p class="express" :style="'color:' + data.color.express">
          <i class="el-sc-yunfei iconfont-m-"></i>
          <span class="floor-text">运费：10元</span>
        </p> -->
        <p v-if='data.showsales' class="sales" :style="'color:' + data.color.sales">
          <i class="el-sc-kehuxiaoliang3x iconfont-m-"></i>
          <span class="floor-text">销量：3660</span>
        </p>
        <p v-if='data.showaddr' class="addr" :style="'color:' + data.color.addr">
          <i class="el-sc-kucun3  iconfont-m-"></i>
          <span class="floor-text">库存：1000</span>
        </p>
      </div>
      <div class="vippirce" v-if="data.memberprice.show" :style="'background:' + data.memberprice.bg_color">
        <span :style="'color:' + data.memberprice.text_color">{{ data.memberprice.text }}</span>
        <span class="pricenum" :style="'color:' + data.memberprice.price_color">12.09元</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  }
};
</script>

<style lang="scss" scoped>
.commission {
  text-align: center;
  height: 20px;
  color: #ffffff;
  font-size: 13px;
  span {
    line-height: 20px;
  }
  span:first-child {
    letter-spacing: 6px;
  }
}

.detail_info {
  width: 100%;
  &.bg7 {
    background: rgba(0, 0, 0, 0.6);
  }

  p {
    margin: 0;
  }
  .container {
    padding: 24px 12px 8px 12px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px 10px 0 0;
  }
  .top_floor {
    display: flex;
    justify-content: space-between;
  }
  .price-floor {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    // margin: 8px auto 16px;

    .price-level {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;

      .price {
        font-size: 16px;

        .price-unit {
          font-size: 13px;
        }

        .num {
          margin-left: -4px;
          font-weight: bold;
          font-style: normal;
          font-size: 18px;
          line-height: 34px;
        }
      }

      .level {
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 7px 4px;
        border-radius: 2px;
        padding: 0 4px 0 0;
        min-width: 40px;
        width: fit-content;
        height: 13px;
        line-height: 13px;
        color: #ffe382;
        background: #565656;
        .icon-m-huangguan {
          height: 8px;
          line-height: 8px;
          text-align: center;
        }
        .level-name {
          font-size: 10px;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
    .del-price-money {
      display: inline-block;
      font-family: PingFang SC;
      font-style: normal;
      font-weight: bold;
      font-size: 13px;
      line-height: 17px;
      color: #969696;
      position: relative;
      text-decoration: line-through;
      .origin-price-line {
        text-decoration: line-through;
      }
    }
  }
  .floor {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
  }
  .title-floor {
    width: 250px;
    margin-bottom: 8px;
    .title {
      color: #212121;
      width: 0;
      flex: 1;
      font-family: PingFang SC;
      font-style: normal;
      font-weight: bold;
      font-size: 14px;
      line-height: 20px;
      color: #212121;
    }
  }
  .desc-floor {
    width: 250px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 17px;
    color: #969696;
    margin-bottom: 8px;
  }
  .share-collect {
    display: flex;
    .flex_center {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 13px;
      margin-left: 18px;
      justify-content: flex-start;
    }
    i {
      font-size: 20px;
      margin-bottom: 6px;
    }
  }
  .express-floor {
    justify-content: space-between;
    color: #969696;
    p {
      line-height: 17px;
      font-size: 12px;
      color: #969696;
    }

    .floor-text {
      margin-left: 4px;
    }
  }
}
.vippirce {
  border-radius: 30px;
  background: #f5f5f5;
  padding: 8px 10px;
  font-size: 12px;
  margin-top: 10px;
  align-items: center;
  display: flex;
  .pricenum {
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
  }
}
</style>
